<template>
  <div id="app">
    <div>
      <p class="demo">
        <span class="demoSpan">API演示页面(评审论文数据分析)</span>
        <span class="author">【API接口:谭琳；前端开发:吴霁峰，游杰】</span>
      </p>
    </div>
    <div style="border:1px solid black;padding:0 10px">
      <!-- <el-image style="width:100%" :src="require('./assets/banner.png')" fit="fill" :lazy="true" /> -->
      <div style="margin:5px 0">
        <p style="font-weight:300">1、本次只调通了“全文缩略概览”、“翻译质量分析”两个模块。</p>
        <p style="font-weight:300">2、上传文档的，实时抽取过程，需要等待一会。在实际业务场景中，这个等待时间，可以在夜间用后台预处理实现，改善终端用户的使用体验。</p>
      </div>
    </div>
    <input ref="fileId" style="display:none" type="file" @change="getFile">
    <div class="upload-btn-group">
      <el-form label-width="auto" :inline="false" size="normal">
        <el-form-item label="上传送审文档：" size="normal">
          <el-row>
            <!-- <el-col :span="1" :offset="0">
              <i v-if="fileObj.status==='pending'" class="el-icon-loading" />
              <i v-if="fileObj.status==='success'" class="el-icon-circle-check" style="color:#67C23A" />
            </el-col> -->
            <el-col :span="6">
              <el-input v-model="fileObj.file.name" size="small" disabled placeholder="支持的文件格式(.doc,.docx)" />
            </el-col>
            <el-col :span="4">
              <el-button
                :disabled="fileObj.status === 'success'"
                style="margin-left:5px"
                type="success"
                size="small"
                @click="selectFile"
              >选择文件</el-button>
              <el-button
                v-if="fileObj.file"
                type="primary"
                size="small"
                :loading="fileObj.status === 'pending'"
                :disabled="fileObj.status === 'success'"
                @click="submitFile"
              >{{ fileObj.status === 'success' ? '分析完成' : '开始分析' }}</el-button>
              <el-button type="danger" size="small" @click="reset">重置</el-button>
              <!-- <el-button type="primary" size="default" @click="test">测试</el-button> -->
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </div>
    <div v-if="fileObj.file" class="file">
      <!-- <el-row type="flex" justify="start">

        <div class="file-name">{{ fileObj.file.name }}</div>
      </el-row> -->

      <!-- <el-progress type="line" :percentage="fileObj.percentage" :stroke-width="6" /> -->
    </div>
    <div v-if="Object.keys(authorFeatureInfo).length > 0" class="article-info">
      <h3>{{ authorFeatureInfo.title_c }}</h3>
      <div style="margin:0px 0px 10px 0px">摘要：{{ authorFeatureInfo.remark_c }}</div>
      <div style="margin:0px 0px 10px 0px">关键词：{{ authorFeatureInfo.keyword_c }}</div>
    </div>
    <!-- <div
              v-for="(item,index) in abbreviateInfoList"
              :key="`${index}head`"
            >
              <div v-if="item.style === 'head'">
                <a :href="`#${item.text}`">{{ item.text }}</a>
              </div>
            </div> -->
    <div v-loading="fileObj.status === 'pending'" class="page">
      <el-tabs v-model="currentTab" tab-position="top" class="tabs">
        <el-tab-pane
          disabled
          label="文字查重分析"
          name=""
        />
        <el-tab-pane
          disabled
          label="格式规范分析"
          name=""
        />
        <el-tab-pane
          disabled
          label="全文审阅批注"
          name=""
        />
        <el-tab-pane
          label="全文缩略概览"
          name="overview"
        >
          <div v-if="abbreviateInfoList.length === 0">请先上传文件</div>
          <div v-else class="main-container">
            <div class="head-bar">
              <div
                v-for="(item,index) in abbreviateInfoList"
                :key="`${index}head`"
                :index="index + 1"
                style="margin-bottom: 20px"
              >
                <div v-if="item.style === 'head'" class="head-bar-a">
                  <!-- <a :href="`#${item.text}`">{{ item.text }}</a> -->
                  <a style="width:100%;white-space: nowrap;cursor:pointer" class="head-bar-a" @click="anchor(item.text)">{{ item.text }}</a>
                </div>
              </div>
            </div>
            <div class="text-bar">
              <div class="tips"><strong>提示：</strong>本页内容由机器抽取生成，不是作者原文排版格式。仅供快速概览使用。</div>
              <template
                v-for="(item,index) in abbreviateInfoList"
              >
                <!-- {{ abbreviateInfoList[index+1].style }} -->
                <p v-if="item.style === 'head'" :id="item.text" :key="index" style="font-weight:400">{{ item.text }}</p>
                <span v-if="item.style === 'paragraph'" :key="index" class="paragraph" style="font-weight:300">{{ item.text + text(index) }} </span>
                <div :key="index" />
                <!--                <el-image v-if="item.style === 'image' && item.url" :id="`img_${index}`" :ref="`img_${index}`" :key="index" :src="item.url" @load="load(`img_${index}`)" />-->
                <div v-if="item.style === 'image'" :key="index">
                  <el-image v-for="(url,i) in item.urls" :id="`img_${index}_${i}`" :ref="`img_${index}`" :key="i" :src="url" @load="load(`img_${index}_${i}`)" />
                </div>

                <div :key="index" />
              </template>
            </div>
          </div>
        </el-tab-pane>

        <el-tab-pane
          label="翻译质量分析"
          name="translate"
        >
          <div v-if="abbreviateInfoList.length === 0">请先上传文件</div>
          <div v-else class="translate">

            <el-form ref="form" label-width="auto" :inline="false" size="normal">
              <!-- 题目 -->
              <el-form-item label="题目">
                <div style="font-weight:600">{{ authorFeatureInfo.title_c }}</div>
              </el-form-item>
              <el-form-item label="作者翻译">
                {{ authorFeatureInfo.title_e ? authorFeatureInfo.title_e : '无' }}
              </el-form-item>
              <el-form-item label="AI辅助翻译">
                <div class="ai-trans">
                  {{ autoFeatureInfo.title_trans }}
                </div>
              </el-form-item>
              <!-- 摘要 -->
              <el-form-item label="摘要">
                {{ authorFeatureInfo.remark_c }}
              </el-form-item>
              <el-form-item label="作者翻译">
                {{ authorFeatureInfo.remark_e ? authorFeatureInfo.remark_e : '无' }}
              </el-form-item>
              <el-form-item label="AI辅助翻译">
                <div class="ai-trans">
                  {{ autoFeatureInfo.remark_trans }}
                </div>
              </el-form-item>
              <!-- 关键词 -->
              <el-form-item label="关键词">
                {{ authorFeatureInfo.keyword_c }}
              </el-form-item>
              <el-form-item label="作者翻译">
                {{ authorFeatureInfo.keyword_e ? authorFeatureInfo.keyword_e : '无' }}
              </el-form-item>
              <el-form-item label="AI辅助翻译">
                <div class="ai-trans">
                  {{ autoFeatureInfo.keyword_trans }}
                </div>
              </el-form-item>
            </el-form>
          <!-- <div class="title">题目：{{ authorFeatureInfo.title_c }}</div>
          <div class="title-author-trans">作者翻译：{{ authorFeatureInfo.title_e }}</div>
          <div class="title-auto-trans">AI辅助翻译：{{ autoFeatureInfo.title_trans }}</div>
          <h3>摘要：</h3>
          <div>原文：{{ authorFeatureInfo.remark_c }}</div>
          <div>作者翻译：{{ authorFeatureInfo.remark_e }}</div>
          <div>AI辅助翻译：{{ autoFeatureInfo.remark_trans }}</div>
          <h3>关键词：</h3>
          <div>原文：{{ authorFeatureInfo.keyword_c }}</div>
          <div>作者翻译：{{ authorFeatureInfo.keyword_e }}</div>
          <div>AI辅助翻译：{{ autoFeatureInfo.keyword_trans.split('.').join('; ') }}</div> -->

          </div>
        </el-tab-pane>
        <el-tab-pane
          disabled
          label="选题质量分析"
          name=""
        />

        <el-tab-pane
          disabled
          label="参考文献相关度分析"
          name=""
        />
      </el-tabs>
      <div class="review-bar">
        <!-- <img style="width:100%;height:100%" src="assets/review.png" alt=""> -->
        <div style="margin:10px;font-size:14px;color:#303133">专家评分表，这个只是示意图</div>
        <el-image :src="require('./assets/review.png')" fit="fill" :lazy="true" />
      </div>
    </div>

    <!-- <router-view :key="key" /> -->
  </div>
</template>

<script>
import service from '@/api/index'
import { blobToDataURL } from '@/utils/helper'
export default {
  data() {
    return {
      currentTab: 'overview',
      fileObj: {
        file: { name: '' },
        percentage: 0,
        status: 'ready'
      },
      abbreviateInfoList: [],
      authorFeatureInfo: {},
      autoFeatureInfo: {},
      cBtnLoading: false
    }
  },
  computed: {
    key() {
      return this.$router.path
    },
    text() {
      return (index) => {
        // console.log(this.abbreviateInfoList.length, index + 1)
        // console.log(index)
        // console.log(this.abbreviateInfoList[index + 1])
        if (index + 1 >= this.abbreviateInfoList.length) {
          // debugger
          return ''
        } else {
          if (this.abbreviateInfoList[index + 1].style !== 'paragraph') {
            return ''
          } else {
            return '......'
          }
        }
      }
    }

  },
  methods: {
    load(ref) {
      // if (this.$refs[ref][0]) {
      //   if (this.$refs[ref][0].imageWidth > 400) {
      //     document.getElementById(ref).style.width = '400px'
      //   }
      // }
      if (document.getElementById(ref).offsetWidth > 400) {
        document.getElementById(ref).style.width = '400px'
      }
    },
    test() {
      console.log(this.$refs)
    },
    anchor(name) {
      const element = document.getElementById(name)
      if (element) {
        element.scrollIntoView()
      }
    },
    selectFile() {
      this.$refs.fileId.click()
    },
    reset() {
      this.fileObj = {
        file: { name: '' },
        percentage: 0,
        status: 'ready'
      }
      this.abbreviateInfoList = []
      this.authorFeatureInfo = {}
      this.autoFeatureInfo = {}
      this.$refs.fileId.value = ''
    },
    getFile(e) {
      // console.log(e)
      this.fileObj.file = e.target.files[0]
    },
    submitFile() {
      if (this.fileObj.file.name === '') {
        this.$message.warning('请先选择文件！')
      } else {
        // this.cBtnLoading = true
        this.fileObj.status = 'pending'
        const formData = new window.FormData()
        formData.append('file', this.fileObj.file)
        // console.log(formData)
        service.submitFile(formData).then(it => {
          if (it) {
            const { task_number } = it
            this.getProgress(task_number)
          }
        }).catch(err => {
          console.log(err)
        })
      }
    },
    getProgress(task_number) {
      service.getTaskProcess({ task_number }).then(it => {
        // console.log(it)
        setTimeout(() => {
          this.fileObj.status = 'pending'
          if (it.progress < 100) {
            this.getProgress(task_number)
          } else {
            // this.cBtnLoading = false
            this.fileObj.percentage = it.progress
            this.fileObj.status = 'success'
            this.getResult(task_number)
          }
        }, 2000) // 每隔两秒如果不符合条件则请求一次
      })
    },
    getResult(task_number) {
      service.getTaskResult({ task_number }).then(it => {
        // console.log(it.abbreviate_info_list)
        this.abbreviateInfoList = it.abbreviate_info_list
        this.authorFeatureInfo = it.feature_info
        this.autoFeatureInfo = it.feature_trans_info
        this.getImage(task_number)
      })
    },
    getImage(task_number) {
      console.log('abbreviateInfoList', this.abbreviateInfoList)
      this.abbreviateInfoList.map(item => {
        if (item.style === 'image') {
          // 多个图片的情况-----开始
          const imagesArray = item.text.split(';')
          const newUrlArray = []
          imagesArray.forEach((val) => {
            service.getImage({ task_number, image_name: val }).then(it => {
              blobToDataURL(new window.Blob([it]), (url) => {
                // item.url = url
                newUrlArray.push(url)
                // this.$forceUpdate()
              })
            })
          })
          // 多个图片的情况-----结束
          this.$set(item, 'urls', newUrlArray)
          // console.log(this.abbreviateInfoList)
        }
      })
    }
    // getImage(task_number, imageNameList) {
    //   return Promise.all(
    //     imageNameList.map(item => {
    //     // return new Promise((resolve, reject) => {
    //     // var img = document.createElement('img')
    //       return new Promise((resolve, reject) => {
    //         service.getImage({ task_number, image_name: item.text }).then(it => {
    //           // console.log(it)
    //           const myBlob = new window.Blob([it])
    //           const qrUrl = window.URL.createObjectURL(myBlob)
    //           console.log(qrUrl)
    //           this.abbreviateInfoList.forEach(item => {
    //             if (item.style === 'image') {
    //               item.text = qrUrl
    //             }
    //           })
    //           resolve()
    //           // img.src = qrUrl
    //           // img.onload = () => {
    //           //   window.URL.revokeObjectURL(qrUrl)
    //           // }
    //           // const imgDiv = document.querySelector('#img')
    //           // imgDiv.appendChild(img)
    //         }).catch(err => {
    //           reject(err)
    //         })
    //       })
    //     })
    //   )

    // })
  }
}

</script>

<style scoped lang="scss">
::v-deep .el-tabs__item {
  font-size: 18px;
}
a {
  color: black
}
#app {
  min-width: 1500px;
}
.ai-trans {
  border: 1px solid black;
  padding: 0px 5px;
  font-size: 18px;
  color: #606060;

}
.page {
  display: flex;
  flex-direction: row;
  height: 100%;
  .review-bar {
    border-left: 1px solid #e4e7ed;
    flex:1
  }
  .tabs {
    flex:3
  }
}
.demo {
    color: #000;
    font-weight: W6;
    font-size: 20px;
    line-height: normal;
    letter-spacing: 5px;
    padding-left: 12px;
    background: #f6faff;
    border: 1px solid #1890ff;
    line-height: 49px;
    margin: 10px 0;

}
.author {
    float: right;
}
.demoSpan {
    font-weight: 800;
}
.upload-btn-group {
  margin:10px 0px;
  .btn {
    margin:0px 5px
  }
}

.file {
  margin:10px;
  .file-name {
    font-size: 14px;
    margin-left: 10px;
  }
}
.article-info {
  border: 1px solid black;
  padding: 5px
}
.main-container {
  display: flex;
  flex-direction: row;
  .head-bar {
    //flex: 3;
    //max-height: 1000px;
    //overflow-y: scroll;
    width: 220px;
    .head-bar-a{
      font-size: 14px;
      text-overflow:ellipsis;
      overflow: hidden;
      color:#007398;
    }
    .head-bar-a :hover{
      // color: #007398;
      text-decoration:underline
    }
  }
  .text-bar {
    .tips {
      font-size: 14px;
      font-weight: 300;
      margin: 10px 0px;
      padding: 5px;
      background-color: #ecf4ff;
    }
    flex: 12;
    //max-height: 1000px;
    //overflow-y: scroll;
    border-left: 1px solid black;
    padding-left: 10px;
    margin: 0 10px;
    .paragraph {
      text-align: justify;
      text-justify: inter-ideograph;
      text-indent: 2em;
    }
  }
}

</style>
